<template>
  <div class="app-container" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
    >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.purchaseCode"
                clearable
                placeholder="采购单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-select
                style="width:100%"
                clearable
                placeholder="单据状态"
                v-model="queryParams.status"
            >
              <template v-for="(item,index) in purchase_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.skuCode"
                clearable
                placeholder="SKU编码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.skuName"
                clearable
                placeholder="商品名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-select v-model="queryParams.warehouseId" style="width: 100%" clearable placeholder="采购仓库">
              <el-option
                  v-for="item in warehouseList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.delivery"
                clearable
                placeholder="配送方式"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.waybillCode"
                clearable
                placeholder="运单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.createByName"
                clearable
                placeholder="创建人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="picker">
            <el-date-picker
                style="width:100%"
                v-model="timeData"
                start-placeholder="创建时间"
                end-placeholder="创建时间"
                range-separator="-"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                unlink-panels
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>

      </div>
    </el-form>
    <div>
      <el-button  type="primary"  @click="clickCreateTask" v-hasPermi="['purchase:erp:save']">生成采购任务</el-button>
      <el-button type="primary"  icon="Download" >导出 </el-button>
    </div>
    <vxe-table
        border
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        :height="tableHeight"
        :tree-config="{transform: true, rowField: 'purchaseId', parentField: 'parentId', expandAll: false}"
        :row-config="{isCurrent: true, isHover: true}"
        :checkbox-config="{ trigger:'row'}"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column type="seq" width="80" title="序号" tree-node ></vxe-column>
      <vxe-column field="status" width="110" title="单据状态">
        <template v-slot="{row}">
          {{ returnDictLabel(purchase_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="purchaseCode" width="200" title="采购单号"></vxe-column>
      <vxe-column field="skuCode" width="200" title="SKU编码"></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称" ></vxe-column>
      <vxe-column field="coverUrl"  width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl" ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称" ></vxe-column>
      <vxe-column field="totalNum" width="100" title="采购数量" ></vxe-column>
      <vxe-column field="totalMoney" width="100" title="采购费用" ></vxe-column>
      <vxe-column field="vendorName" width="150" title="供应商名称" ></vxe-column>
      <vxe-column field="delivery" width="120" title="配送方式" ></vxe-column>
      <vxe-column field="waybillCode" width="150" title="运单号" ></vxe-column>
      <vxe-column field="receiptByName" width="150" title="收货人" ></vxe-column>
      <vxe-column field="receiptPhone" width="150" title="联系方式" ></vxe-column>
      <vxe-column field="receiptAddress" width="150" title="收货地址" ></vxe-column>
      <vxe-column field="remark" width="200" title="备注" ></vxe-column>
      <vxe-column field="createByName" width="120" title="创建人" ></vxe-column>
      <vxe-column field="createTime" width="180" title="创建时间" ></vxe-column>
      <vxe-column  title="操作" width="120" fixed="right" >
        <template #default="{row}">
          <el-button  type="text"  style="color:green"  @click="chickDetail(row)"  >查看 </el-button>
          <el-button type="text" v-if="row.status==3" style="color:red" @click="handleDelete(row)" v-hasPermi="['purchase:erp:delete']">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />
<!--    新增 编辑采购订单 -->
<!--    <EditErpPurchase v-if="isShowDialog" :isShowDialog="isShowDialog" @cancel="isShowDialog=false"></EditErpPurchase>-->
<!--    采购订单详情-->
    <PurchaseDetail v-if="isShowDetail" :isShowDialog="isShowDetail" :detailData="detailData" @cancel="isShowDetail=false"></PurchaseDetail>
    <!-- 生成采购任务-->
    <PurchaseTask v-if="isShowDialogTask" :isShowDialog="isShowDialogTask" @cancel="closeTask"></PurchaseTask>
  </div>
</template>

<script setup>
import {onMounted, ref, nextTick, getCurrentInstance} from "vue";
import PurchaseTask from "@/views/procure/ErpPurchase/purchaseTask.vue";
import PurchaseDetail from "@/views/procure/ErpPurchase/purchaseDetail.vue";
import {getErpPurchaseHeaderList, warehouseGetFilter} from "@/api/scApi";
import ImagePreview from "@/components/ImagePreview/index.vue";

const {proxy} = getCurrentInstance();
const { purchase_status } = proxy.useDict("purchase_status");

let queryParams=ref({
  pageNum: 1,
  pageSize: 10,
})
let tableHeight = ref(0);
const total=ref(0)
let timeData=ref([])
let loading=ref(false)
onMounted(() => {
  getWarehouseFilter()
  getList()
  nextTick(() => {
    tableHeight.value = window.innerHeight - 380;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 380;
  }
})

let isShowDialog=ref(false)
let isShowDialogTask=ref(false)
function handleAdd(){
  isShowDialog.value=true
}
let tableList = ref([])

let isShowDetail=ref(false)
let detailData=ref({})
function chickDetail(row){
  detailData.value=row
  isShowDetail.value=true
}

function getList(){
  loading.value =true
  queryParams.value.startTime=timeData.value[0]
  queryParams.value.endTime=timeData.value[1]

  let params={
    pageNum:queryParams.value.pageNum,
    pageSize:queryParams.value.pageSize,
    param:queryParams.value
  }
  getErpPurchaseHeaderList(params).then(res=>{
     if(res.code===200){
       tableList.value=res.data
       total.value=res.total
     }
  }).finally(()=>{
    loading.value=false
  })
}

let warehouseList = ref([])
function getWarehouseFilter() {
  warehouseGetFilter({
    status: 0
  }).then(res => {
    if (res.code === 200) {
      warehouseList.value = res.data.map(item => {
        item.value = item.warehouseId
        item.label = item.warehouseName
        return item
      })

    }
  })
}

const resetQuery = () => {
  timeData.value=[]
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};

function clickCreateTask(){
  isShowDialogTask.value=true
}

function closeTask(isLoad){
  isShowDialogTask.value=false
  if(isLoad){
    getList()
  }
}

function handleDelete(row){

}

</script>

<style scoped lang="scss">

</style>